<!--
  考试详情页面
-->
<template>
  <div class="exam-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button
          text
          :icon="ArrowLeft"
          @click="goBack"
          class="back-btn"
        >
          返回考试列表
        </el-button>
        <h1>{{ exam?.title }}</h1>
        <div class="exam-meta">
          <el-tag :type="getStatusType(exam?.status)">
            {{ getStatusText(exam?.status) }}
          </el-tag>
          <span class="creator">创建者：{{ exam?.creator_name }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-button
          v-if="canEditExam"
          :icon="Edit"
          @click="editExam"
        >
          编辑
        </el-button>
        <el-button
          v-if="canPublishExam"
          type="primary"
          @click="publishExam"
        >
          发布
        </el-button>
        <el-button
          v-if="canStartExam"
          type="success"
          @click="startExam"
        >
          开始考试
        </el-button>
        <el-button
          v-if="canFinishExam"
          type="warning"
          @click="finishExam"
        >
          结束考试
        </el-button>
      </div>
    </div>

    <!-- 标签页 -->
    <el-card>
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息" name="basic">
          <div class="basic-info">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="考试类型">{{ exam?.exam_type }}</el-descriptions-item>
              <el-descriptions-item label="考试时长">{{ exam?.duration }} 分钟</el-descriptions-item>
              <el-descriptions-item label="开始时间">{{ formatDateTime(exam?.start_time) }}</el-descriptions-item>
              <el-descriptions-item label="结束时间">{{ formatDateTime(exam?.end_time) }}</el-descriptions-item>
              <el-descriptions-item label="满分">{{ exam?.total_score }} 分</el-descriptions-item>
              <el-descriptions-item label="及格分">{{ exam?.passing_score }} 分</el-descriptions-item>
              <el-descriptions-item label="最大参与人数">{{ exam?.max_participants || '无限制' }}</el-descriptions-item>
              <el-descriptions-item label="尝试次数">{{ exam?.max_attempts }} 次</el-descriptions-item>
              <el-descriptions-item label="创建时间" :span="2">{{ formatDateTime(exam?.created_at) }}</el-descriptions-item>
            </el-descriptions>

            <div class="exam-description">
              <h3>考试说明</h3>
              <p>{{ exam?.description || '暂无说明' }}</p>
            </div>

            <div class="exam-settings" v-if="examSettings.length > 0">
              <h3>考试设置</h3>
              <el-row :gutter="16">
                <el-col :span="12" v-for="setting in examSettings" :key="setting.key">
                  <div class="setting-item">
                    <el-icon class="setting-icon">
                      <component :is="setting.icon" />
                    </el-icon>
                    <span class="setting-label">{{ setting.label }}</span>
                    <el-tag :type="setting.value ? 'success' : 'info'" size="small">
                      {{ setting.value ? '开启' : '关闭' }}
                    </el-tag>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="exam-tags" v-if="exam?.tags && exam.tags.length > 0">
              <h3>标签</h3>
              <div class="tag-list">
                <el-tag
                  v-for="tag in exam.tags"
                  :key="tag"
                  class="tag-item"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 题目管理 -->
        <el-tab-pane label="题目管理" name="questions" v-if="authStore.hasPermission('question:read')">
          <div class="questions-section">
            <div class="section-header">
              <div class="header-left">
                <h3>考试题目</h3>
                <span class="question-count">共 {{ examQuestions.length }} 道题目，总分 {{ totalScore }} 分</span>
              </div>
              <div class="header-right">
                <el-button
                  :icon="Plus"
                  @click="addQuestion"
                  v-if="canEditExam"
                >
                  添加题目
                </el-button>
                <el-button
                  :icon="Download"
                  @click="exportQuestions"
                  v-if="examQuestions.length > 0"
                >
                  导出题目
                </el-button>
              </div>
            </div>

            <el-table :data="examQuestions">
              <el-table-column type="index" width="50" />
              <el-table-column label="题目" min-width="300">
                <template #default="{ row, $index }">
                  <div class="question-cell">
                    <div class="question-number">{{ $index + 1 }}.</div>
                    <div class="question-content">
                      {{ truncateText(stripHtml(row.content), 150) }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="类型" width="100">
                <template #default="{ row }">
                  <el-tag size="small">{{ getTypeText(row.question_type) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="难度" width="80">
                <template #default="{ row }">
                  <el-tag size="small" :type="getDifficultyType(row.difficulty)">
                    {{ row.difficulty }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="分值" width="80">
                <template #default="{ row }">
                  {{ row.points }} 分
                </template>
              </el-table-column>
              <el-table-column label="题库" width="150">
                <template #default="{ row }">
                  {{ row.question_bank_name }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150" v-if="canEditExam">
                <template #default="{ row, $index }">
                  <div class="action-buttons">
                    <el-button
                      text
                      size="small"
                      @click="moveQuestion($index, 'up')"
                      :disabled="$index === 0"
                    >
                      上移
                    </el-button>
                    <el-button
                      text
                      size="small"
                      @click="moveQuestion($index, 'down')"
                      :disabled="$index === examQuestions.length - 1"
                    >
                      下移
                    </el-button>
                    <el-button
                      text
                      type="danger"
                      size="small"
                      @click="removeQuestion($index)"
                    >
                      删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <!-- 参与者管理 -->
        <el-tab-pane label="参与者管理" name="participants" v-if="authStore.hasRole(['teacher', 'admin'])">
          <div class="participants-section">
            <div class="section-header">
              <div class="header-left">
                <h3>参与者列表</h3>
                <span class="participant-count">共 {{ participants.length }} 名参与者</span>
              </div>
              <div class="header-right">
                <el-button
                  :icon="UserFilled"
                  @click="showAddParticipantDialog = true"
                  v-if="exam?.status === 'published'"
                >
                  添加参与者
                </el-button>
                <el-button
                  :icon="Download"
                  @click="exportParticipants"
                  v-if="participants.length > 0"
                >
                  导出列表
                </el-button>
              </div>
            </div>

            <el-table :data="participants" v-loading="participantsLoading">
              <el-table-column label="姓名" prop="student_name" />
              <el-table-column label="学号" prop="student_id" />
              <el-table-column label="邮箱" prop="student_email" />
              <el-table-column label="状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="getParticipantStatusType(row.status)">
                    {{ getParticipantStatusText(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="开始时间" width="150">
                <template #default="{ row }">
                  {{ row.started_at ? formatDateTime(row.started_at) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="用时" width="100">
                <template #default="{ row }">
                  {{ formatDuration(row.time_spent) }}
                </template>
              </el-table-column>
              <el-table-column label="成绩" width="100">
                <template #default="{ row }">
                  <span v-if="row.score !== null" class="score-value">
                    {{ row.score }} 分
                  </span>
                  <span v-else class="score-pending">未评分</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template #default="{ row }">
                  <div class="action-buttons">
                    <el-button
                      text
                      type="primary"
                      size="small"
                      @click="viewParticipantDetail(row)"
                    >
                      详情
                    </el-button>
                    <el-button
                      v-if="row.status === 'started'"
                      text
                      type="danger"
                      size="small"
                      @click="forceSubmitParticipant(row)"
                    >
                      强制提交
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-wrapper" v-if="participantsTotal > 0">
              <el-pagination
                v-model:current-page="participantsPage"
                v-model:page-size="participantsPageSize"
                :total="participantsTotal"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="loadParticipants"
                @current-change="loadParticipants"
              />
            </div>
          </div>
        </el-tab-pane>

        <!-- 监考界面 -->
        <el-tab-pane label="监考界面" name="monitor" v-if="authStore.hasRole(['teacher', 'admin']) && exam?.status === 'ongoing'">
          <div class="monitor-section">
            <div class="monitor-header">
              <div class="header-left">
                <h3>实时监考</h3>
                <span class="online-count">{{ onlineCount }} 人在线考试</span>
              </div>
              <div class="header-right">
                <el-button
                  :icon="Notification"
                  type="warning"
                  @click="sendGlobalNotice"
                >
                  发送通知
                </el-button>
                <el-button
                  :icon="Refresh"
                  @click="refreshMonitorData"
                >
                  刷新
                </el-button>
              </div>
            </div>

            <!-- 统计信息 -->
            <el-row :gutter="20" class="monitor-stats">
              <el-col :span="6">
                <el-statistic title="在线人数" :value="onlineCount" />
              </el-col>
              <el-col :span="6">
                <el-statistic title="已提交" :value="submittedCount" />
              </el-col>
              <el-col :span="6">
                <el-statistic title="异常情况" :value="abnormalCount" />
              </el-col>
              <el-col :span="6">
                <el-statistic title="平均用时" :value="averageTime" suffix="分钟" />
              </el-col>
            </el-row>

            <!-- 在线考生列表 -->
            <div class="online-students">
              <h4>在线考生</h4>
              <el-table :data="onlineStudents" max-height="400">
                <el-table-column label="姓名" prop="student_name" />
                <el-table-column label="学号" prop="student_id" />
                <el-table-column label="当前题目" width="100">
                  <template #default="{ row }">
                    第 {{ row.current_question }} 题
                  </template>
                </el-table-column>
                <el-table-column label="已用时" width="100">
                  <template #default="{ row }">
                    {{ formatDuration(row.time_spent) }}
                  </template>
                </el-table-column>
                <el-table-column label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="row.has_warnings ? 'danger' : 'success'" size="small">
                      {{ row.has_warnings ? '异常' : '正常' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template #default="{ row }">
                    <div class="action-buttons">
                      <el-button
                        text
                        size="small"
                        @click="viewStudentScreen(row)"
                      >
                        查看屏幕
                      </el-button>
                      <el-button
                        v-if="row.has_warnings"
                        text
                        type="warning"
                        size="small"
                        @click="sendWarning(row)"
                      >
                        警告
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>

        <!-- 考试结果 -->
        <el-tab-pane label="考试结果" name="results" v-if="exam?.status === 'completed'">
          <div class="results-section">
            <div class="results-header">
              <div class="header-left">
                <h3>考试结果统计</h3>
                <span class="result-count">共 {{ resultStats.total }} 份答卷</span>
              </div>
              <div class="header-right">
                <el-button
                  :icon="Download"
                  type="primary"
                  @click="exportResults"
                >
                  导出成绩
                </el-button>
              </div>
            </div>

            <!-- 成绩统计 -->
            <el-row :gutter="20" class="result-stats">
              <el-col :span="6">
                <el-statistic title="平均分" :value="resultStats.average_score" :precision="2" />
              </el-col>
              <el-col :span="6">
                <el-statistic title="最高分" :value="resultStats.max_score" />
              </el-col>
              <el-col :span="6">
                <el-statistic title="最低分" :value="resultStats.min_score" />
              </el-col>
              <el-col :span="6">
                <el-statistic title="及格率" :value="resultStats.pass_rate" suffix="%" />
              </el-col>
            </el-row>

            <!-- 成绩分布图表 -->
            <el-card class="chart-card">
              <h4>成绩分布</h4>
              <div id="scoreChart" style="height: 300px"></div>
            </el-card>

            <!-- 成绩列表 -->
            <div class="results-list">
              <h4>详细成绩</h4>
              <el-table :data="examResults">
                <el-table-column label="排名" type="index" width="60" />
                <el-table-column label="姓名" prop="student_name" />
                <el-table-column label="学号" prop="student_id" />
                <el-table-column label="得分" width="100">
                  <template #default="{ row }">
                    <span :class="getScoreClass(row.score, exam?.passing_score)">
                      {{ row.score }} 分
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="用时" width="100">
                  <template #default="{ row }">
                    {{ formatDuration(row.time_spent) }}
                  </template>
                </el-table-column>
                <el-table-column label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="row.score >= (exam?.passing_score || 0) ? 'success' : 'danger'" size="small">
                      {{ row.score >= (exam?.passing_score || 0) ? '及格' : '不及格' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template #default="{ row }">
                    <div class="action-buttons">
                      <el-button
                        text
                        type="primary"
                        size="small"
                        @click="viewExamPaper(row)"
                      >
                        查看试卷
                      </el-button>
                      <el-button
                        text
                        size="small"
                        @click="analyzeStudentAnswer(row)"
                      >
                        答题分析
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加参与者对话框 -->
    <el-dialog
      v-model="showAddParticipantDialog"
      title="添加参与者"
      width="500px"
    >
      <el-form :model="participantForm" label-width="100px">
        <el-form-item label="添加方式">
          <el-radio-group v-model="participantForm.type">
            <el-radio value="manual">手动添加</el-radio>
            <el-radio value="batch">批量导入</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddParticipantDialog = false">取消</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAuthStore } from '@/stores'
import {
  getExamination,
  publishExamination,
  startExamination,
  finishExamination,
  deleteExamination,
  getExamQuestions,
  exportExamResults
} from '@/api/examinations'
import type { Examination, Question } from '@/types'
import {
  ArrowLeft,
  Edit,
  Plus,
  Download,
  UserFilled,
  Notification,
  Refresh,
  Clock,
  Check,
  Close,
  Document,
  Lock,
  Eye,
  Bell
} from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()

const examId = Number(route.params.id)
const activeTab = ref('basic')

// 响应式数据
const loading = ref(false)
const exam = ref<Examination | null>(null)
const examQuestions = ref<Question[]>([])
const participants = ref<any[]>([])
const examResults = ref<any[]>([])

// 统计数据
const resultStats = reactive({
  total: 0,
  average_score: 0,
  max_score: 0,
  min_score: 0,
  pass_rate: 0
})

// 监考数据
const onlineStudents = ref<any[]>([])
const onlineCount = ref(0)
const submittedCount = ref(0)
const abnormalCount = ref(0)
const averageTime = ref(0)

// 分页
const participantsPage = ref(1)
const participantsPageSize = ref(20)
const participantsTotal = ref(0)
const participantsLoading = ref(false)

// 对话框
const showAddParticipantDialog = ref(false)
const participantForm = reactive({
  type: 'manual'
})

// 计算属性
const totalScore = computed(() => {
  return examQuestions.value.reduce((total, question) => total + (question.points || 0), 0)
})

const examSettings = computed(() => {
  if (!exam.value) return []

  const settings = [
    { key: 'randomize_questions', label: '随机题目', icon: 'Shuffle', value: exam.value.randomize_questions },
    { key: 'randomize_options', label: '随机选项', icon: 'Shuffle', value: exam.value.randomize_options },
    { key: 'show_results', label: '显示结果', icon: 'Eye', value: exam.value.show_results },
    { key: 'show_answers', label: '显示答案', icon: 'Check', value: exam.value.show_answers },
    { key: 'allow_late_start', label: '延迟开始', icon: 'Clock', value: exam.value.allow_late_start },
    { key: 'auto_submit', label: '自动提交', icon: 'Check', value: exam.value.auto_submit },
    { key: 'anti_cheating', label: '防作弊', icon: 'Lock', value: exam.value.anti_cheating },
    { key: 'face_recognition', label: '人脸识别', icon: 'Camera', value: exam.value.face_recognition }
  ]

  return settings
})

// 权限检查
const canEditExam = computed(() => {
  return authStore.hasPermission('exam:write') &&
         ['draft', 'published'].includes(exam.value?.status || '') &&
         (exam.value?.creator === authStore.user?.id || authStore.hasRole('admin'))
})

const canPublishExam = computed(() => {
  return authStore.hasPermission('exam:write') &&
         exam.value?.status === 'draft'
})

const canStartExam = computed(() => {
  return authStore.hasPermission('exam:write') &&
         exam.value?.status === 'published'
})

const canFinishExam = computed(() => {
  return authStore.hasPermission('exam:write') &&
         exam.value?.status === 'ongoing'
})

// 加载考试信息
const loadExamInfo = async () => {
  try {
    const response = await getExamination(examId)
    exam.value = response.data
  } catch (error) {
    console.error('Failed to load exam:', error)
    ElMessage.error('加载考试信息失败')
  }
}

// 加载考试题目
const loadExamQuestions = async () => {
  try {
    const response = await getExamQuestions(examId)
    examQuestions.value = response.data
  } catch (error) {
    console.error('Failed to load questions:', error)
  }
}

// 加载参与者
const loadParticipants = async () => {
  participantsLoading.value = true
  try {
    // TODO: 实现参与者API调用
    // const response = await getExamParticipants(examId, participantsPage.value, participantsPageSize.value)
    // participants.value = response.data.results
    // participantsTotal.value = response.data.count
  } catch (error) {
    console.error('Failed to load participants:', error)
  } finally {
    participantsLoading.value = false
  }
}

// 加载考试结果
const loadExamResults = async () => {
  try {
    // TODO: 实现考试结果API调用
    // const response = await getExamResults(examId)
    // examResults.value = response.data
    // 计算统计数据
    // calculateResultStats()
  } catch (error) {
    console.error('Failed to load results:', error)
  }
}

// 处理标签页变化
const handleTabChange = (tabName: string) => {
  if (tabName === 'questions') {
    loadExamQuestions()
  } else if (tabName === 'participants') {
    loadParticipants()
  } else if (tabName === 'results') {
    loadExamResults()
  } else if (tabName === 'monitor') {
    loadMonitorData()
  }
}

// 发布考试
const publishExam = async () => {
  try {
    await publishExamination(examId)
    ElMessage.success('考试发布成功')
    loadExamInfo()
  } catch (error) {
    console.error('Failed to publish exam:', error)
    ElMessage.error('发布失败')
  }
}

// 开始考试
const startExam = async () => {
  try {
    await startExamination(examId)
    ElMessage.success('考试开始成功')
    loadExamInfo()
  } catch (error) {
    console.error('Failed to start exam:', error)
    ElMessage.error('开始失败')
  }
}

// 结束考试
const finishExam = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要结束这个考试吗？结束后学生将无法继续答题。',
      '确认结束',
      {
        confirmButtonText: '结束考试',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await finishExamination(examId)
    ElMessage.success('考试结束成功')
    loadExamInfo()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Failed to finish exam:', error)
      ElMessage.error('结束失败')
    }
  }
}

// 编辑考试
const editExam = () => {
  router.push(`/examinations/${examId}/edit`)
}

// 导出结果
const exportResults = async () => {
  try {
    await exportExamResults(examId, 'excel')
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('Failed to export results:', error)
    ElMessage.error('导出失败')
  }
}

// 返回
const goBack = () => {
  router.push('/examinations/list')
}

// 工具函数
const getStatusType = (status?: string) => {
  const types: Record<string, string> = {
    draft: 'info',
    published: 'warning',
    ongoing: 'danger',
    completed: 'success',
    cancelled: 'info'
  }
  return types[status || ''] || 'info'
}

const getStatusText = (status?: string) => {
  const texts: Record<string, string> = {
    draft: '草稿',
    published: '已发布',
    ongoing: '进行中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status || ''] || status
}

const formatDateTime = (dateString?: string) => {
  return dateString ? new Date(dateString).toLocaleString() : ''
}

const formatDuration = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  if (hours > 0) {
    return `${hours}小时${minutes}分钟`
  }
  return `${minutes}分钟`
}

const stripHtml = (html: string) => {
  return html.replace(/<[^>]*>/g, '')
}

const truncateText = (text: string, maxLength: number) => {
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
}

const getTypeText = (type: string) => {
  const types: Record<string, string> = {
    single_choice: '单选',
    multiple_choice: '多选',
    true_false: '判断',
    fill_blank: '填空',
    essay: '简答'
  }
  return types[type] || type
}

const getDifficultyType = (difficulty: string) => {
  const types: Record<string, string> = {
    easy: 'success',
    medium: 'warning',
    hard: 'danger'
  }
  return types[difficulty] || 'info'
}

const getParticipantStatusType = (status: string) => {
  const types: Record<string, string> = {
    registered: 'info',
    started: 'warning',
    submitted: 'success',
    abandoned: 'danger'
  }
  return types[status] || 'info'
}

const getParticipantStatusText = (status: string) => {
  const texts: Record<string, string> = {
    registered: '已注册',
    started: '考试中',
    submitted: '已提交',
    abandoned: '已放弃'
  }
  return texts[status] || status
}

const getScoreClass = (score: number, passingScore: number) => {
  return score >= passingScore ? 'score-passed' : 'score-failed'
}

// 占位方法
const addQuestion = () => { ElMessage.info('添加题目功能开发中...') }
const exportQuestions = () => { ElMessage.info('导出题目功能开发中...') }
const moveQuestion = (index: number, direction: string) => { ElMessage.info('题目排序功能开发中...') }
const removeQuestion = (index: number) => { ElMessage.info('删除题目功能开发中...') }
const exportParticipants = () => { ElMessage.info('导出参与者功能开发中...') }
const viewParticipantDetail = (participant: any) => { ElMessage.info('查看详情功能开发中...') }
const forceSubmitParticipant = (participant: any) => { ElMessage.info('强制提交功能开发中...') }
const loadMonitorData = () => { ElMessage.info('监考数据加载功能开发中...') }
const sendGlobalNotice = () => { ElMessage.info('发送通知功能开发中...') }
const refreshMonitorData = () => { ElMessage.info('刷新数据功能开发中...') }
const viewStudentScreen = (student: any) => { ElMessage.info('查看屏幕功能开发中...') }
const sendWarning = (student: any) => { ElMessage.info('发送警告功能开发中...') }
const viewExamPaper = (result: any) => { ElMessage.info('查看试卷功能开发中...') }
const analyzeStudentAnswer = (result: any) => { ElMessage.info('答题分析功能开发中...') }

// 页面挂载时加载数据
onMounted(async () => {
  await loadExamInfo()
  loadExamQuestions()
})
</script>

<style scoped lang="scss">
.exam-detail {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;

    .back-btn {
      margin-bottom: 12px;
    }

    h1 {
      font-size: 28px;
      color: var(--el-text-color-primary);
      margin: 0 0 8px 0;
    }

    .exam-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 14px;
      color: var(--el-text-color-regular);

      .creator {
        color: var(--el-text-color-placeholder);
      }
    }

    .header-right {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }
  }

  .basic-info {
    .exam-description {
      margin-top: 24px;

      h3 {
        font-size: 16px;
        color: var(--el-text-color-primary);
        margin: 0 0 12px 0;
      }

      p {
        line-height: 1.6;
        color: var(--el-text-color-regular);
        margin: 0;
      }
    }

    .exam-settings {
      margin-top: 24px;

      h3 {
        font-size: 16px;
        color: var(--el-text-color-primary);
        margin: 0 0 16px 0;
      }

      .setting-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 0;

        .setting-icon {
          color: var(--el-color-primary);
        }

        .setting-label {
          flex: 1;
          color: var(--el-text-color-regular);
        }
      }
    }

    .exam-tags {
      margin-top: 24px;

      h3 {
        font-size: 16px;
        color: var(--el-text-color-primary);
        margin: 0 0 12px 0;
      }

      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .tag-item {
          margin: 0;
        }
      }
    }
  }

  .questions-section {
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .header-left {
        h3 {
          font-size: 16px;
          margin: 0 0 4px 0;
        }

        .question-count {
          font-size: 14px;
          color: var(--el-text-color-regular);
        }
      }

      .header-right {
        display: flex;
        gap: 8px;
      }
    }

    .question-cell {
      display: flex;
      align-items: flex-start;

      .question-number {
        margin-right: 8px;
        font-weight: 500;
        color: var(--el-text-color-primary);
      }

      .question-content {
        flex: 1;
        line-height: 1.5;
      }
    }
  }

  .participants-section {
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .header-left {
        h3 {
          font-size: 16px;
          margin: 0 0 4px 0;
        }

        .participant-count {
          font-size: 14px;
          color: var(--el-text-color-regular);
        }
      }

      .header-right {
        display: flex;
        gap: 8px;
      }
    }

    .score-value {
      font-weight: 500;
      color: var(--el-color-primary);
    }

    .score-pending {
      color: var(--el-text-color-placeholder);
    }
  }

  .monitor-section {
    .monitor-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .header-left {
        h3 {
          font-size: 16px;
          margin: 0 0 4px 0;
        }

        .online-count {
          font-size: 14px;
          color: var(--el-color-success);
          font-weight: 500;
        }
      }

      .header-right {
        display: flex;
        gap: 8px;
      }
    }

    .monitor-stats {
      margin-bottom: 24px;
    }

    .online-students {
      h4 {
        font-size: 16px;
        color: var(--el-text-color-primary);
        margin: 0 0 16px 0;
      }
    }
  }

  .results-section {
    .results-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .header-left {
        h3 {
          font-size: 16px;
          margin: 0 0 4px 0;
        }

        .result-count {
          font-size: 14px;
          color: var(--el-text-color-regular);
        }
      }

      .header-right {
        display: flex;
        gap: 8px;
      }
    }

    .result-stats {
      margin-bottom: 24px;
    }

    .chart-card {
      margin-bottom: 24px;

      h4 {
        font-size: 16px;
        color: var(--el-text-color-primary);
        margin: 0 0 16px 0;
      }
    }

    .results-list {
      h4 {
        font-size: 16px;
        color: var(--el-text-color-primary);
        margin: 0 0 16px 0;
      }

      .score-passed {
        color: var(--el-color-success);
        font-weight: 500;
      }

      .score-failed {
        color: var(--el-color-danger);
        font-weight: 500;
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 8px;
  }

  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .exam-detail {
    .page-header {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;

      .header-right {
        flex-direction: column;
      }
    }

    .questions-section,
    .participants-section,
    .monitor-section,
    .results-section {
      .section-header,
      .results-header,
      .monitor-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;

        .header-right {
          justify-content: flex-start;
        }
      }
    }
  }
}
</style>